﻿<template>
    <el-dialog
        title="短信验证"
        v-model="visible"
        :width="600"
        destroy-on-close
        :close-on-click-modal="false"
        :before-close="handleBeforeClose"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-form-item prop="phone">
                <el-input
                    v-model="entityObj.phone"
                    prefix-icon="el-icon-iphone"
                    clearable
                    :placeholder="$t('login.mobilePlaceholder')"
                >
                    <template #prepend>+86</template>
                </el-input>
            </el-form-item>
            <el-form-item prop="smsCode" style="margin-bottom: 35px">
                <div class="login-msg-yzm">
                    <el-input
                        v-model="entityObj.smsCode"
                        prefix-icon="el-icon-unlock"
                        clearable
                        :placeholder="$t('login.smsPlaceholder')"
                    ></el-input>
                    <el-button @click="getSmsCode" :disabled="disabled">
                        {{ this.$t("login.smsGet")
                        }}
                        <span
                            v-if="disabled"
                        >({{ time }})</span>
                    </el-button>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    style="width: 100%"
                    :loading="islogin"
                    round
                    @click="login"
                >{{ $t("login.signIn") }}</el-button>
            </el-form-item>
            <div class="login-reg">
                {{ $t("login.noAccount") }}
                <router-link to="/user_register">
                    {{
                    $t("login.createAccount")
                    }}
                </router-link>
            </div>
        </el-form>
    </el-dialog>
</template>



<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            mode: "Add",
            entityObj: {},
            orgType: 2,
            materialState: false,
            applyOrderState: false,
            storeState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            disabled: false,
            time:60,
            //验证规则
            rules: {
                smsCode: [
                    {
                        required: true,
                        type: "string",
                        message: "验证码不能为空",
                    },
                ],
            },
        };
    },
    computed: {},
    methods: {
        //显示=
        async open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        handleBeforeClose() {
            this.$confirm("还未登录,确定要关闭吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.visible = false;
                })
                .catch(() => {
                    // 用户点击了取消按钮，不执行关闭
                });
        },
        async login() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    try {
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                "auth/sms-login",
                                { ...this.entityObj }
                            );
                        if (returnValue.status == 200) {
                            this.$emit("fatherMethod",returnValue);
                            this.visible = false;
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                            this.isSaveing = false;
                        }
                    } catch (error) {
                        this.loading = false;
                        this.isSaveing = false;
                        return false;
                    }
                }
            });
        },
        //表单注入数据
        async setData(data) {
            console.log(data);
            this.entityObj = data;
            //this.getSmsCode();
        },
        async getSmsCode() {
            try {
                this.disabled = true;
                this.time = 60;
                var t = setInterval(() => {
                    this.time -= 1;
                    if (this.time < 1) {
                        clearInterval(t);
                        this.disabled = false;
                        this.time = 0;
                    }
                }, 1000);

                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "auth/sms-code",
                    { ...this.entityObj }
                );
                if (returnValue.status == 200) {
                    this.$message.success("验证码发送成功");
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                    this.isSaveing = false;
                }
            } catch (error) {
                this.loading = false;
                this.isSaveing = false;
                return false;
            }
        },
    },
    async mounted() {},
};
</script>

<style></style>
